<template>
	<view class="container">
		<tui-loading v-show="!pageData.loading"></tui-loading>
		<view class="page" v-show="pageData.loading" :style="{ marginTop: header.init.height + 'px' }">
			<!--header-->
			<tui-navigation-bar @init="initNavigation" @change="changeNavigation" :title="header.title"
				:color="tui.getColorSite().title.color" :backgroundColor="tui.getColorSite().title.backgroundColor"
				:splitLine="header.splitLine" :isOpacity="header.isOpacity" :maxOpacity="header.maxOpacity"
				:transparent="header.transparent" :scrollTop="header.scrollTop" :scrollRatio="header.scrollRatio"
				:isCustom="header.isCustom" :isImmersive="header.isImmersive" :isFixed="header.isFixed"
				:backdropFilter="header.backdropFilter" :dropDownHide="header.dropDownHide" :zIndex="header.zIndex">
			</tui-navigation-bar>
			<!-- logo -->
			<view class="loginLogo">
				<tui-image-group :imageList="imageList" width="303rpx" height="60rpx" radius="0">
				</tui-image-group>
			</view>
			<view class="tui-form-box">

				<view class="tui-view-input">
					<tui-input placeholder="请输入手机号" type="text" v-model="param.username" maxlength="11"
						confirmType="done">
						<template v-slot:left>
							<view class="tabText" style="padding-right: 20rpx;">
								<text>手机号码</text>
								<!-- <tui-icon name="mobile" :size="20" color="#6d7a87"></tui-icon> -->
							</view>
						</template>
					</tui-input>
					<tui-input placeholder="请输入密码" type="password" v-model="param.password" maxlength="11"
						confirmType="done">
						<template v-slot:left>
							<view class="tabText" style="padding-right: 20rpx;">
								<text>设置密码</text>
								<!-- <tui-icon name="mobile" :size="20" color="#6d7a87"></tui-icon> -->
							</view>
						</template>
					</tui-input>
					<tui-input placeholder="请再次输入密码" type="number" v-model="param.manage_password" maxlength="6">
						<template v-slot:left>
							<view class="tabText" style="padding-right: 20rpx;">
								<text>确认密码</text>
								<!-- <tui-icon name="pwd" :size="20" color="#6d7a87"></tui-icon> -->
							</view>
						</template>
					</tui-input>
					<view class="dingwei">
						<tui-input placeholder="请输入短信验证码" type="number" v-model="param.tel" maxlength="11"
							confirmType="done">
							<template v-slot:left>
								<view class="tabText" style="padding-right: 50rpx;">
									<text>验证码</text>
									
									<!-- <tui-icon name="mobile" :size="20" color="#6d7a87"></tui-icon> -->
								</view>
								
							</template>
						
						</tui-input>
						<view class="senma">发送验证码</view>
					</view>
					<tui-input placeholder="请输入推荐人手机号码" type="text" v-model="param.referral_username" maxlength="11"
						confirmType="done" :disabled="pageData.referral_username_status">
						<template v-slot:left>
							<view class="tabText" style="padding-right: 50rpx;">
								<text>推荐人</text>
								<!-- <tui-icon name="share" :size="20" color="#6d7a87"></tui-icon> -->
							</view>
						</template>
					</tui-input>
				</view>
				<view style="width: 90%;margin: 54rpx auto 0;">
					<tui-button shadow shape="circle" :type="tui.getColorSite().button.type" height="88rpx"
						@click="formAction()">立即注册</tui-button>
				</view>
				<view class="tui-cell-text">
					<view hover-class="tui-opcity" :hover-stay-time="150">
						已有账号？
						<text class="tui-color-red" @tap="detail('login')">登录</text>
					</view>
				</view>
				<view class="infoProtocol" v-for="(item,index) in checkboxItems" :key="index">
					<tui-checkbox scaleRatio= '0.7'  :checked="item.checked" :value="item.value" color="green"
					 				borderColor="#999">
					 			</tui-checkbox>
					 			<text class="tui-text"> 我已阅读井同意  <text style="color: #36B184;"> 《用户协议》 </text> 和 <text style="color: #36B184;">《隐私政策》</text></text>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import formCheck from "@/components/common/tui-validation/tui-validation.js"
	export default {
		data() {
			return {
				// 是否同意协议
				checkboxItems: [{
				 			name: '中国',
				 			value: '1',
				 			checked: false
				 		}],
				get: {},
				header: {
					title: '会员注册', //NavigationBar标题
					splitLine: false, //是否需要分割线
					isOpacity: false, //是否设置不透明度
					maxOpacity: 1, //不透明度最大值 0-1
					transparent: false, //背景透明 （设置该属性，则背景透明，只出现内容，isOpacity和maxOpacity失效）
					scrollTop: 0.5, //滚动条滚动距离
					scrollRatio: 0.3, //isOpacity 为true时生效（opacity=scrollTop /windowWidth * scrollRatio）
					isCustom: false, //是否自定义NavigationBar内容
					isImmersive: true, //是否沉浸式,
					isFixed: true, //是否固定
					backdropFilter: false, //是否开启高斯模糊效果[仅在支持的浏览器有效果]，为true时maxOpacity设置小于1的值
					dropDownHide: false, //下拉隐藏NavigationBar，主要针对有回弹效果ios端
					zIndex: 9998, //z-index值
					init: {
						width: 0,
						height: 0,
						left: 0,
						top: 0,
						top: 0,
						scrollH: 0,
					},
				},
				pageData: {
					loading: false,
					referral_username_status: false,
				},
				param: {
					username: '',
					password: '',
					manage_password: '',
					tel: '',
					referral_username: '',
				},
				appInit: {},
				user: {},
				imageList: [{
					id: 1,
					src: "../static/img/login.png"
				}]
			}
		},
		// 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		onLoad(e) {
			let that = this;
			// uni.startPullDownRefresh();
			console.log("self:onLoad++++++++++++++++++++++++++++++++++++++++++++++++++");
			uni.stopPullDownRefresh(); //停止当前页面下拉刷新
			if (typeof(e.scene) != 'undefined') {
				e = that.tui.getUrlkey(decodeURIComponent(e.scene));
			}
			that.get = e;
			console.log("self:getData=>", that.get);
			let obj = {};
			uni.getSystemInfo({
				success: function(res) {
					that.header.init.width = obj.left || res.windowWidth;
					that.header.init.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
					that.header.init.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
					that.header.init.scrollH = res.windowWidth * 0.6;
					that.header.init.scrollH = res.windowWidth * 1;
				}
			});
			that.$forceUpdate();
			that.initialize();
		},
		// 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		onShow() {
			let that = this;
		},
		// 监听页面滚动，参数为Object
		onPageScroll(e) {
			let that = this;
			that.$forceUpdate();
		},
		methods: {
			initialize() {
				let that = this;
				let Int = setInterval(function() {
					that.appInit = that.tui.getCache("appInit");
					console.log('self:appInit=>', that.appInit);
					if (typeof(that.appInit) == 'object') {
						clearInterval(Int);
						that.__init();
					}
				}, 800);
			},
			async __init() {
				let that = this;
				that.pageData.loading = true;
				if (that.tui.isDebug()) {
					that.param.username = '1311044' + (Math.floor(Math.random() * (9999 - 1000 + 1)) + 1000);
					that.param.password = '123456';
					that.param.manage_password = '123456';
					that.param.tel = '13110447185';
					that.param.referral_username = '13100000168';
				}
				if (typeof that.get.form !== 'undefined') {
					that.param.referral_username = that.get.form;
					that.pageData.referral_username_status = true;
				}
			},
			async detail(type, item = {}) {
				let that = this;
				switch (type) {
					case 'login':
						that.tui.urlHref('/pages/public-login');
						break;
					default:
						console.log(type, item);
						break;
				}
			},
			async formAction() {
				let that = this;
				let rules = [
					// 
					{
						name: "username",
						rule: ["required", ],
						msg: ["请输入登录账号", ],
					},
					{
						name: "password",
						rule: ["required", ],
						msg: ["请输入登录密码", ],
					},
					{
						name: "manage_password",
						rule: ["required"],
						msg: ["请输入操作密码"]
					},
					{
						name: "referral_username",
						rule: ["required", ],
						msg: ["请输入推荐人账号", ]
					}
				];
				let checkRes = formCheck.validation(that.param, rules);
				if (checkRes) {
					that.tui.toast(checkRes + "！", false, function() {}, 1500);
					return;
				}
				if (/^[-]?\d{6}$/.test(that.param.manage_password) === false) {
					that.tui.toast("请输入6位数字操作密码！", false, function() {}, 1500);
				}
				let response = await that.tui.post('/user/register', that.param, {
					type: 'default',
				}, false, true, false);
				that.tui.toast(response.info, false, function() {
					switch (response.status) {
						case 0:
							that.tui.setUserInfo(response.data, function(response) {
								that.tui.urlTab('/pages/index-index');
							});
							break;
					}
				}, 1500);
			},
			initNavigation(e) {
				let that = this;
				that.header.opacity = e.opacity;
				that.header.top = e.top;
				that.$forceUpdate();
			},
			changeNavigation(e) {
				let that = this;
				that.header.opacity = e.opacity;
				that.$forceUpdate();
			},
			back() {
				let that = this;
				that.tui.urlBack(1);
			},
		},
		// 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
		onReachBottom() {
			let that = this;
		},
		// 监听页面隐藏
		onHide() {
			let that = this;
		},
		// 监听页面卸载
		onUnload() {
			let that = this;
		},
		// 页面返回
		onBackPress() {
			let that = this;
		},
	}
</script>

<style scoped lang="scss">
	.container{
		background-color: #fff;
		.dingwei{
			position: relative;
			.senma{
				position: absolute;
				top: 30rpx;
				right: 0;
				color: #36B184;
				font-size: 30rpx;
			}
		}
	}
	.infoProtocol{
		margin-top: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tui-text{
		margin-left: 10rpx;
		font-size: 24rpx;
		color: #666666;
	}
	.tabText {
		color: #333333;
		font-size: 30rpx;
	}

	.loginLogo {
		display: flex;
		justify-content: center;
		margin-top: 73rpx;
		margin-bottom: 84rpx;
	}

	.tui-form-box {
		.tui-view-input {
			width: 100%;
			box-sizing: border-box;
			padding: 0 40rpx;
		}

		.tui-cell-text {
			width: 100%;
			padding: 40rpx 80rpx;
			box-sizing: border-box;
			font-size: $uni-font-size-sm;
			color: $uni-text-color-grey;
			display: flex;
			align-items: center;
			// justify-content: space-between;
			justify-content: center;
		}
	}
</style>